<div class="admin-table">

  <div class="admin-table-search">
    <form nz-form [formGroup]="validateForm" class="ant-advanced-search-form">
      <div nz-row [nzGutter]="40">
        <div nz-col [nzSpan]="8" *ngFor="let control of controlArray" [style.display]="control.show?'block':'none'">
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSpan]="5">
              <label [attr.for]="'field'+control.index">Field {{control.index}}</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="19">
              <nz-input [nzSize]="'large'" [nzPlaceHolder]="'placeholder'" [formControlName]="'field'+control.index" [nzId]="'field'+control.index"></nz-input>
            </div>
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col [nzSpan]="24" style="text-align: right;">
          <button nz-button [nzType]="'primary'">Search</button>
          <button nz-button (click)="resetForm()">Clear</button>
        </div>
      </div>
    </form>
  </div>

  <div class="admin-table-list">
    <nz-table #nzTable [nzDataSource]="_dataSet" [nzIsPagination]="false">
      <thead nz-thead>
        <tr>
          <th nz-th>
            <span>Name</span>
          </th>
          <th nz-th>
            <span>Age</span>
          </th>
          <th nz-th>
            <span>Address</span>
          </th>
        </tr>
      </thead>
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td>
            <a>{{data.name}}</a>
          </td>
          <td nz-td>{{data.age}}</td>
          <td nz-td>{{data.address}}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
  
  <div class="admin-table-pagination">
    <nz-pagination [nzPageIndex]="1" [nzTotal]="500"></nz-pagination>
  </div>
</div>
